<template>
	<view class="friends">
		<uni-list :border="true">
			<uni-list-chat
				v-for="(item, index) in list"
				:key="index"
				@click="toSing(item)"
				:clickable="true"
				:title="item.conversationName"
				:avatar="item.conversationAvatarUrl"
				:note="item.lastMessage.message"
				:time="$u.timeFormat(item.lastMessage.timestamp, 'mm-dd hh:MM')"
				:badge-text="item.unreadMessageCount"
			></uni-list-chat>
		</uni-list>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	computed: {
		...mapState(['msgTimeStamp'])
	},
	data() {
		return {
			list: []
		};
	},
	onShow() {
		setTimeout(() => {
			this.$im.getFriendList().then((res) => {
				this.list = res;
			});
		}, 1000);
	},
	watch: {
		msgTimeStamp() {
			this.$im.getFriendList().then((res) => {
				console.log(res, '会话列表');
				this.list = res;
				console.log(this.list, '会话列表更新了');
			});
		}
	},
	methods: {
		toSing(item) {
			console.log(item);
			const preid = uni.$prefix + item.conversationID;
			if (type === 0) {
				this.nav_to(`/pages/im/chat?id=${preid}&type=${item.type}&name=${item.conversationName}`);
			} else if (type === 2) {
				this.nav_to(`/pages/im/chat_group?id=${preid}&type=${item.type}&name=${item.conversationName}`);
			}
		}
	}
};
</script>

<style lang="scss">
.friends {
	/deep/ .uni-list-chat {
		background: #111;
	}
	/deep/ .uni-list--border-top {
		background: #333;
	}
	/deep/ .uni-list--border-top {
		background: #333;
	}
	/deep/ .uni-list-chat__content-title {
		color: #fff;
	}
	/deep/ .uni-list-chat__content-note {
		color: #eee;
	}
	/deep/ .uni-list-chat__header-image {
		border-radius: 50%;
	}
	/deep/ .uni-list-chat__header {
		border: none;
	}
}
</style>
